import React, { useEffect, useState } from "react";
import style from "../css/personal.module.css";
import { Tabs } from 'antd-mobile'
import Invitation from "./personal/Invitation";
import Mine from "./personal/Mine";
import Evaluate from "./personal/Evaluate";
import { useNavigate } from "react-router-dom";
export default function Personal() {
  const navigate = useNavigate();
  const returns = ()=>{
    navigate(-1);
  }
  const fansClub = ()=>{
    navigate('/my/personal/fansclub')
  }
  const attention = ()=>{
    navigate('/my/personal/attention')
  }
  const [user,setUser] = useState({})
  const [attentions,setAttentions] = useState([])
  const [fans,setFans] = useState([])
  const [praise,setPraise] = useState([])
  useEffect(()=>{
    let userlist = JSON.parse(localStorage.getItem('user'))
    setUser(userlist)
    setAttentions(JSON.parse(userlist.attention))
    setFans(JSON.parse(userlist.fans))
    setPraise(JSON.parse(userlist.praise))
  },[])
  return (
    <>
    <div className={style.perfahui} onClick={returns}>{'<'}</div>
      <img
        className={style.bjimg}
        src={user.userImg}
      />
      <div className={style.pernamebox}>
        <div className={style.perimgbox}>
          <img
            src={user.userImg}
            alt=""
          />
        </div>
        <div className={style.pername}>
          <div className={style.persusername}>{user.name}</div>
          <div className={style.perulf}>
            <ul className={style.myfensi}>
              <li onClick={attention}>
                <div>{attentions.length}</div>
                <span>关注</span>
              </li>
              <li onClick={fansClub}>
                <div>{fans.length}</div>
                <span>粉丝</span>
              </li>
              <li>
                <div>{praise.length}</div>
                <span>点赞</span>
              </li>
            </ul>
            <button className={style.perbianji}>编辑资料</button>
          </div>
        </div>
      </div>
      <div className={style.leaveword}>{user.text}</div>
      {/* tabs */}
      <Tabs>
          <Tabs.Tab title={'我的'+6} key='mine'>
            <Mine></Mine>
          </Tabs.Tab>
          <Tabs.Tab title={'帖子'+4} key='invitation'>
            <Evaluate></Evaluate>
          </Tabs.Tab>
          <Tabs.Tab title={'评价'+3} key='evaluate'>
            <Invitation></Invitation>
          </Tabs.Tab>
        </Tabs>
    </>
  );
}
